<template>
  <view class="container">
    <view class="common_cell">
      <u-cell-group :border="false">
        <u-cell
          @click="this.$refs.timePicker.show = true"
          :border="false"
          title="时间"
          :value="formattedDate"
        >
        </u-cell>
      </u-cell-group>
    </view>

    <view class="common_cell">
      <u-cell-group :border="false" class="common_cell">
        <u-cell
          title="启动"
          @click="this.$refs.startTimePicker.show = true"
          :value="startTime"
        />
        <u-cell
          :border="false"
          title="停止"
          :value="stopTime"
          @click="this.$refs.stopTimePicker.show = true"
        />
      </u-cell-group>
    </view>

    <commonDateTimePicker
      ref="timePicker"
      @confirm="timePickerConfirm"
      mode="date"
    />

    <!-- 预约到期时间 -->
    <commonDateTimePicker
      ref="startTimePicker"
      @confirm="startTimePickerConfirm"
      mode="time"
    />

    <!-- 结束时间弹窗 -->
    <commonDateTimePicker
      ref="stopTimePicker"
      @confirm="stopTimePickerConfirm"
      mode="time"
    />

    <!-- 保存设置 -->
    <view class="common_save_button">保存设置 </view>
  </view>
</template>
  
  <script>
import commonDateTimePicker from "@/components/common-datetime-picker/index.vue";

import dayjs from "dayjs";
export default {
  components: {
    commonDateTimePicker,
  },
  data() {
    return {
      date: "2024-02-02",
      // 启动时间
      startTime: "",
      stopTime: "",
    };
  },
  computed: {
    formattedDate() {
      return dayjs(this.date).format("YYYY年MM月DD日");
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    startTimePickerConfirm(_val) {
      this.startTime = _val;
    },
    stopTimePickerConfirm(_val) {
      this.stopTime = _val;
    },
    timePickerConfirm(_val) {
      this.date = _val;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
uni-page-body {
  height: 100%;
}

page {
  height: 100%;
}
.container {
  background: #f6f7fb;
  height: 100%;

  padding: 0 25.568rpx 25.568rpx 25.568rpx;

  ::v-deep .u-cell__body {
    padding-left: 0px;
    padding-right: 0px;
  }
}
</style>
  